<template>
	<div class="main-home">
		<!--		<h2>user</h2>-->
		<div v-if="false" class="main-search">
			<el-form :model="data.searchForm" label-width="auto" inline style="text-align: left;">
				<el-form-item label="账号">
					<el-input v-model="data.searchForm.userAccount" clearable style="width: 200px"
					          @blur="handleSearchClick"/>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="data.searchForm.username" clearable style="width: 200px"
					          @blur="handleSearchClick"/>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="data.searchForm.email" clearable style="width: 200px"
					          @blur="handleSearchClick"/>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="data.searchForm.phone" clearable style="width: 200px"
					          @blur="handleSearchClick"/>
				</el-form-item>
				<!--
									<el-form-item label="状态">
										<el-select v-model="data.searchForm.deptState" clearable placeholder="&#45;&#45;请选择&#45;&#45;"
												   style="width: 240px">
											<el-option label="正常" value="0"/>
											<el-option label="禁用" value="1"/>
										</el-select>
									</el-form-item>
				-->
				<el-form-item label="">
					<el-button icon="Search" type="primary" @click="handleSearchClick" round plain>搜索</el-button>
					<el-button icon="Refresh" @click="resetSearchClick" round plain>重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!--有数据-->
		<div>
			<!--数据列表-->
			<div class="main-content">
				<div class="device-manage-thermometer-info">
					<!--温度-->
					<el-card class="device-dynamic-info">
						<thermometer/>
					</el-card>
					<!--单片机状态-->
					<el-card class="device-dynamic-info" style="width: 45vw">
						<div class="device-singlechip-info-div" style="display: inline-block">
							<div class="device-singlechip-info-left" style="width: 35vw; display: inline-block">
								<div>
									<el-text>ID：</el-text>
									<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.id }}</el-tag>
								</div>
								<div>
									<el-text>设备名称：</el-text>
									<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.name }}</el-tag>
								</div>
								<div>
									<el-text>时间：</el-text>
									<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.time }}</el-tag>
								</div>
								<div>
									<el-text>设备状态：</el-text>
									<!--正常状态-->
									<el-tag v-if="data.deviceSinglechipInfo.status==status[0].code" type="primary"
									        effect="light"
									        round>{{ status[0].msg }}
									</el-tag>
									<!--关机状态-->
									<el-tag v-else-if="data.deviceSinglechipInfo.status==status[1].code" type="warning"
									        effect="light" round>{{ status[1].msg }}
									</el-tag>
									<!--异常状态-->
									<el-tag v-else-if="data.deviceSinglechipInfo.status==status[2].code" type="danger"
									        effect="light"
									        round>{{ status[2].msg }}
									</el-tag>
								</div>
							</div>
							<div class="device-singlechip-info-right" style="width: 10vw; display: inline-block">
								<el-icon size="120">
									<!--							<Monitor/>-->
									<!--							<Platform/>-->
									<Iphone/>
								</el-icon>
							</div>
						</div>
					</el-card>
					<!--湿度-->
					<el-card class="device-dynamic-info">
						<hygrometer/>
					</el-card>
				</div>
				<h2 style="margin-bottom: 2vw">设备操控</h2>
				<div class="device-manage-info-list">
					<el-card class="device-manage-info" v-for="item in data.list" :key="item.id">
						<template #header>
							<div class="card-header">
								<div style="width: 60%; display:flex;justify-content: left; align-items:center;">
									<el-text>{{ item.deviceName }}</el-text>
								</div>
								<div style="width: 40%; text-align: right;">
									<el-switch v-model="item.deviceStatus" :before-change="beforeSwitchChange"
									           :active-value="status[0].name" :inactive-value="status[1].name">
										<template #active-action>
											<span class="custom-active-action">T</span>
										</template>
										<template #inactive-action>
											<span class="custom-inactive-action">F</span>
										</template>
									</el-switch>
								</div>
							</div>
						
						</template>
						<!--					<p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>-->
						<!--					<template #footer>Footer content</template>-->
					</el-card>
				</div>
			
			</div>
		</div>
		<!--空状态-->
		<div v-if="false" class="main-content">
			<el-button type="primary" @click="handleAddClick()">新增菜单</el-button>
			<el-empty description="无数据"/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reqList, reqAdd, reqDelete, reqDeleteList, reqEdit } from '@/service/main/manage.ts'
import { errorMessage, infoMessage, successMessage } from '@/utils/ElMessageUtils.ts'
import { reactive, ref } from 'vue'
import { reqGetDeptTree } from '@/service/main/dept.ts'
import { BASE_URL } from '@/service/config'
import { LocalStorageUtils } from '@/utils/StorageUtils.ts'
import Thermometer from '@/components/echarts/thermometer.vue'
import Hygrometer from '@/components/echarts/hygrometer.vue'
import { Iphone } from '@element-plus/icons-vue'

/********************************************* 变量区 ************************************************************/
// 部门树。
const defaultProps = {
	children: 'children',
	label: 'deptName'
}

// 设备状态。
const status = [
	{ code: 'ON', msg: '开机' },
	{ code: 'OFF', msg: '关机' },
	{ code: 'ABNORMAL_OFF', msg: '设备异常关机' }

]

const treeRef = ref()

// 数据内容。
let data = reactive({
	// 单片机信息。
	deviceSinglechipInfo: {
		id: '1915613230630825572',
		name: '张三一楼中控台',
		time: '2025-04-27 14:39:26',
		status: 'ABNORMAL_OFF'
	},
	
	// 列表展示内容。
	list: [],
	// 加载列表。
	loadingList: [],
	
	dialog: {
		visible: false,
		title: '新增用户',
		isAdd: false,   // 是否添加。
		name: '',// 名称
		btnName: ''
	},
	deleteDialog: {
		visible: false,
		deptId: '',
		deleteName: ''
	},
	// 搜索条件。
	searchForm: {},
	uploadUrl: BASE_URL + '/file/upload/',
	// 添加/编辑表单。
	editForm: {},
	// 上传头像所需要的token。
	headers: { token: LocalStorageUtils.getKey('wisdomToken') },
	deleteList: []
	
})

/********************************************* API接口 ************************************************************/
// 获取菜单。
const dataList = function getList(searchData = null) {
	reqList(searchData).then(res => {
		console.log('reqList.res ====> ', res)
		if (res.resultStatus) {
			data.list = res.resultData.records
		} else {
			errorMessage(true, '动态菜单获取失败！！')
		}
	})
}
dataList()

// 获取角色。
const getList = function getDeptList(searchData = null) {
	reqGetDeptTree(searchData).then(res => {
		console.log('reqGetDeptTree.res ====> ', res)
		if (res.resultStatus) {
			data.deptList = res.resultData
		} else {
			errorMessage(true, '动态菜单获取失败！！')
		}
	})
}
getList()

// 搜索框。
function handleSearchClick() {
	// console.log('搜索数据：：：：：', data.searchForm)
	dataList(data.searchForm)
}

/**
 *
 * @param data
 */
var isLoaded = function isLoaded(loaded = false) {
	return loaded
}

/**
 * 打开前。
 */
function beforeSwitchChange() {
	// loading1.value = true
	isLoaded(true)
	return new Promise((resolve) => {
		// 发送指令。【开灯】
		isLoaded(false)
		setTimeout(() => {
			// loading1.value = false
			successMessage(true, '操作成功')
			return resolve(true)
		}, 1000)
	})
}

// 添加数据。
function addData() {
	// console.log('data.editForm =========> ', data.editForm)
	reqAdd(data.editForm).then(res => {
		if (res.resultStatus) {
			console.log('reqAdd.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
			data.dialog.visible = false
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
	// handleSearchClick()
}

// 修改数据。
function editData() {
	reqEdit(data.editForm).then(res => {
		if (res.resultStatus) {
			console.log('reqEdit.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
			data.dialog.visible = false
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

/**
 * 单条删除。
 * @param type
 * @param index
 * @param row
 */
function handleDelete(index, row) {
	console.log('handleDelete.row =====>  ', row)
	reqDelete(row.userId).then(res => {
		if (res.resultStatus) {
			console.log('reqDelete.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

// 批量删除。
function handleDeleteList() {
	let idList = {
		idList: []
	}
	data.deleteList.forEach((item) => {
		console.log('item ====>', item)
		idList.idList.push(item.userId)
	})
	// console.log("ids =====>",ids)
	reqDeleteList(idList).then(res => {
		if (res.resultStatus) {
			console.log('reqDeleteList.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

/********************************************* 事件 ************************************************************/

// 重置搜索框。
function resetSearchClick() {
	data.searchForm = {}
	handleSearchClick()
}

/**
 * 添加。
 * @param type
 * @param index
 * @param row
 */
function handleAddClick() {
	data.dialog = {
		visible: true,
		title: '新增用户',
		isAdd: true,
		name: '名称',
		btnName: '新增'
	}
}

/**
 * 编辑。
 * @param type
 * @param index
 * @param row
 */
function handleEditClick(index = null, row) {
	data.dialog = {
		visible: true,
		title: '编辑用户',
		isAdd: true,
		name: '名称',
		btnName: '编辑'
	}
	console.log('row =====> ', row)
	// 遍历选择。
	data.editForm = row
}

/**
 * 批量删除。
 */
function handleDeleteListClick(newSelection) {
	data.deleteList = newSelection
	console.log('newSelection ====>', newSelection)
	console.log('批量删除！')
}

// 选择选中。
const handleCheckChange = (data, selectData) => {
	// console.log('selectData.checkedKeys ====> ', selectData.checkedKeys)
	setCheckedKeys(selectData.checkedKeys)
}

// 弹窗显示后，显示选中的菜单权限。
const handleDialogOpened = () => {
	// console.log('data.editForm.menuPermissions  ==> ', data.editForm.menuPermissions)
	if (data.editForm.menuPermissions) {
		setCheckedKeys(data.editForm.menuPermissions)
	}
}


const handleSizeChange = (val) => {
	// console.log(`每页 ${val} 条`);
	this.data.searchForm.size = val
	this.dataList()
}
const handleCurrentChange = (val) => {
	// console.log(`当前页: ${val}`);
	this.data.searchForm.current = val
	this.dataList()
}

/*-------------------------------------------- start：头像相关函数【文件上传】 -----------------------------------------------*/
// 修改头像图标。
function updateAvatarUrl() {
	// 修改用户头像API接口。
	
	// console.log("修改手机号！！")
	// this.$store.dispatch('updateAvatarUrl', this.userInfo.avatarUrl).then(res => {
	// 	// console.log("updatePhone.res", res);
	// 	if (res !== undefined && res.resultStatus === true) {
	// 		this.$message.success(res.resultData);
	// 		this.getUserInfo()
	// 	}
	// })
}

// 文件上传成功时的钩子。
function handleAvatarSuccess(res, file) {
	// console.log("上传成功！保存头像路径！。。。。")
	// this.imageUrl = URL.createObjectURL(file.raw);
	// console.log("imageUrl ==============>",this.imageUrl);
	// console.log("res ===>",res);
	// console.log("file ===========>",file);
	if (res !== undefined && res.resultStatus === true) {
		data.editForm.avatarUrl = res.resultData
	}
	updateAvatarUrl()  // 调用API接口。
	
}

function handleAvatarError(err, file) {
	// console.log("头像上传失败！",err)
	errorMessage(true, '头像上传失败！' + err)
}

// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
/**
 * 只能上传 jpg 格式图片，且文件大小 < 2MB！
 * @param file
 */
function beforeAvatarUpload(file) {
	// console.log("file ===> ",file);
	const isJPG = file.type === 'image/jpeg'
	const isLt2M = file.size / 1024 / 1024 < 2
	// console.log("上传头像。。。。")
	if (!isJPG) {
		errorMessage(true, '上传头像图片只能是 JPG 格式!')
	} else if (!isLt2M) {
		errorMessage(true, '上传头像图片大小不能超过 2MB!')
	}
	return isJPG && isLt2M
	// return false
}

// // 获取头像token。
// function getAvatarToken() {
// 	console.log('token =======> ', LocalStorageUtils.getKey('wisdomToken'))
// 	data.headers =
// }
//
// getAvatarToken()
/*-------------------------------------------- end：头像相关函数【文件上传】 -----------------------------------------------*/

/********************************************* tree选中数据 ************************************************************/
// 设置值。
const setCheckedKeys = (data) => {
	treeRef.value!.setCheckedKeys(data, false)
}
const getCheckedKeys = () => {
	return treeRef.value!.getCheckedKeys(false)
}
// 重置值。
const resetChecked = () => {
	if (treeRef.value) {
		treeRef.value!.setCheckedKeys([], false)
	}
}

/********************************************* 初始化数据 ************************************************************/
// 清除垃圾数据。
function formClear() {
	data.editForm = {}
	data.dialog = {
		visible: false,
		title: '',
		isAdd: false,
		name: '',
		btnName: '新增'
	}
	resetChecked()
}

// 关闭新增/修改弹窗。
function handleClose() {
	formClear()
	infoMessage(true, '已取消')
}

// 关闭删除弹窗。
function handleDeleteClose() {
	data.deleteDialog.visible = false
	infoMessage(true, '已取消')
}
</script>

<style scoped lang="less">
.main-search {
	background-color: white;
	margin-bottom: 20px;
	padding: 5vh 0 2vh 5vw;
	border-radius: 10px;
}

.main-content {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
}

.device-manage-thermometer-info {
	display: flex;
	
	.device-dynamic-info {
		margin: 10px;
		border-radius: 1vw;
		
		display: flex;
		/*垂直排列*/
		flex-direction: column;
		align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
		justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
		
		
		.device-singlechip-info-left {
			width: 70%;
			//background-color: cadetblue;
			
			div {
				margin: 1vw;
				
				.el-text {
					font-size: 10px;
					display: inline-block;
					text-align: right;
					width: 80px;
					color: black;
				}
				
				.el-tag {
					font-size: 10px;
				}
			}
		}
		
		.device-singlechip-info-right {
			width: 30%;
			text-align: center;
			//background-color: aqua;
			margin-right: 1vw;
		}
	}
}


.device-manage-info-list {
	display: flex;
	
	/* wrap:  在必要的时候进行换行*/
	flex-wrap: wrap;
	/* flex-start:  默认从头开始排列*/
	align-content: flex-start;
	/*主轴上的对齐方式为居中*/
	justify-content: center;
	/*交叉轴上对齐方式为居中*/
	align-items: center;
	
	.device-manage-info {
		border-radius: 1vw;
		width: 200px;
		max-width: 400px;
		margin: 20px;
		/*控制每个单元格20%，80%为一行*/
		flex: 0 0 20%;
		//margin-bottom: 20px;
		
		.card-header {
			display: flex;
		}
	}
}


.main-content-btn {
	margin-bottom: 20px;
}

.main-content-pagination {
	display: block;
	text-align: center;
	width: 100%;
}

:global(.el-popconfirm__main) {
	color: red;
	text-align: center;
	white-space: pre-line;
}


.icon-list {
	display: inline-block;
	width: 35px;
	height: 35px;
}

.select-option {
	display: inline-block;
}

/************************************************ start：头像样式 *************************************************/
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	border: 2px dashed #d9d9d9;
	width: 178px;
	height: 178px;
	text-align: center;
}

/************************************************ end：头像样式 *************************************************/
</style>